<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import TableLayout from '@/layout/table-layout.vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import queryServiceRecordList from '@/api-new2/service/service-record';
  import { queryInstStations } from '@/api/structure-management/station';
  import { XlsxUtil, getDatetimeFilename } from '@/utils/util';

  const stationOptions = ref<any[]>([]);

  const fetchStations = async () => {
    const res = await queryInstStations(1, 200);
    const list = Array.isArray((res as any)?.list) ? (res as any).list : [];
    stationOptions.value = list.map((item: any) => ({
      label: item.name,
      value: item.name,
    }));
  };

  onMounted(() => {
    fetchStations();
  });

  const searchFormState = {
    customerName: '',
    serviceStatus: '',
  };

  const statusOptions = [
    { label: '正常', value: 1 },
    { label: '禁用', value: 0 },
  ];

  const serviceStatusOptions = [
    { label: '进行中', value: 2 },
    { label: '已完成', value: 3 },
  ];

  const columns = [
    { title: '记录ID', dataIndex: 'recordId', width: 120 },
    { title: '服务时间', dataIndex: 'serviceTime', width: 150 },
    { title: '服务时长', dataIndex: 'serviceDuration', width: 180 },
    {
      title: '服务状态',
      dataIndex: 'serviceStatusName',
      width: 120,
      render: ({ record }: any) => {
        if (record.serviceStatusName) return record.serviceStatusName;
        if (record.serviceStatus === 1) return '待执行';
        if (record.serviceStatus === 2) return '进行中';
        if (record.serviceStatus === 3) return '已完成';
        return record.serviceStatus ?? '-';
      },
    },
    { title: '服务人员', dataIndex: 'serviceStaff', width: 120 },
    { title: '客户姓名', dataIndex: 'customerName', width: 120 },
    {
      title: '客户性别',
      dataIndex: 'customerGender',
      width: 100,
      render: ({ record }: any) => {
        if (record.customerGenderName) return record.customerGenderName;
        if (record.customerGender === 1) return '男';
        if (record.customerGender === 2) return '女';
        return record.customerGender ?? '-';
      },
    },
    { title: '关联站点', dataIndex: 'stationName', width: 200 },
  ];

  const pageTable = usePageTable({
    searchForm: { state: { ...searchFormState } },
    table: {
      rowKey: 'recordId',
      apiFun: queryServiceRecordList,
      columns,
      rowSelection: {
        type: 'checkbox',
        showCheckedAll: true,
        onlyCurrent: false,
      },
    },
  });

  const onBatchExport = (rows: any[]) => {
    const filename = getDatetimeFilename('服务记录导出 ', '.xlsx');
    XlsxUtil.writeDownload(filename, rows);
  };
</script>

<template>
  <div class="flex flex-col">
    <TableLayout
      v-bind="pageTable.bindProps"
      :create="false"
    >
      <template #searchForm="{ state }">
        <a-form-item field="customerName" label="客户姓名">
          <a-input
            v-model="state.customerName"
            placeholder="请输入客户姓名"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="serviceStatus" label="服务状态">
          <a-select
            v-model="state.serviceStatus"
            placeholder="请选择服务状态"
            allow-clear
            :options="serviceStatusOptions"
          />
        </a-form-item>
      </template>
    </TableLayout>
  </div>
</template>

<style lang="less" scoped></style>
